1、how to pass data from child to parent

关键词拆解：

1. Child → Parent

   • 数据流从子组件传到父组件
   • 这是 React 单向数据流（unidirectional data flow） 的逆向传递

2. Data

   • 可以是事件信息、表单值、状态更新结果等

核心考点：

• 如何在 React 中实现 子向父传递数据
• 是否了解 回调函数 / props / lifting state up
• 能够写出简洁可用的示例

拆解小问题：

1. 父组件如何接收数据？

   • 父组件定义一个函数，用来处理子组件传来的数据

2. 子组件如何传数据？

   • 将父组件的函数通过 props 传给子组件
   • 子组件调用这个函数，把数据作为参数传回父组件

“In React, the standard way to pass data from a child to a parent is by using callback functions. The parent component defines a function to handle the data, then passes it to the child via props. The child calls this function whenever it wants to send data back. For example:

xxxxxxxxxx
10
1
// Parent
2
function Parent() {
3
const handleData = (value) => console.log('Received:', value);
4
return <Child onSendData={handleData} />;
5
}
6
​
7
// Child
8
function Child({ onSendData }) {
9
return <button onClick={() => onSendData('hello parent')}>Send Data</button>;
10
}

This pattern, often called lifting state up, keeps React’s unidirectional data flow predictable, while letting children communicate with parents. It’s simple, reusable, and works for most scenarios without adding extra state management libraries.”

✅ 面试加分点

• 提到 lifting state up
• 强调 unidirectional data flow
• 简单示例展示 callback + props 的用法

2、how to render an element outside of component scope/tree?

关键词拆解：

1. Render outside component tree

   • 意思是把某个 React 元素渲染到 DOM 中不在父组件层次结构的地方
   • 常见场景：模态框（Modal）、工具提示（Tooltip）、Toast 通知等

2. Component scope/tree

   • 默认情况下，React 元素渲染在其父组件的 DOM 节点内
   • 题目考察你对 React portals 的理解

核心考点：

• 是否知道 React Portal
• 理解为什么需要它（CSS 层级、z-index、脱离布局限制）
• 能写出正确的使用方法

拆解小问题：

1. 为什么普通渲染不能满足需求？

   • 父组件可能有 overflow: hidden / relative 等样式限制
   • 模态框可能需要覆盖整个页面

2. React 提供什么解决方案？

   • ReactDOM.createPortal
   • 可以把子组件渲染到 任意 DOM 节点

“In React, when you need to render an element outside the parent component’s DOM hierarchy — for example, a modal, tooltip, or toast — you use React Portals. A portal allows a child component to be rendered into a DOM node that exists outside the parent component’s DOM tree, while still keeping the React tree intact for state and context. For example:

xxxxxxxxxx
7
1
import { createPortal } from 'react-dom';
2
function Modal({ children }) {
3
return createPortal(
4
 <div className="modal">{children}</div>,
5
 document.getElementById('modal-root') // outside the main app DOM
6
);
7
}

This way, the modal can appear above other components without being constrained by parent styles, but it still behaves like a normal React component in terms of state, props, and context.”

✅ 面试加分点

• 强调 保持 React state/context 可用
• 提到 常见使用场景：Modal, Tooltip, Toast
• 给出 简短代码示例

3、 how to implement code splitting in your react app and why

关键词拆解：

1. Code splitting

   • 把应用的 JavaScript 代码分割成多个小的 bundle
   • 用户只加载当前页面需要的代码，而不是整个应用
   • 减少 初次加载时间，提高性能

2. Implement in React

   • 题目考察你是否熟悉 React 的 动态导入（dynamic import） 和 lazy loading

3. Why

   • 需要解释为什么这样做：性能优化、用户体验、减少首屏加载

核心考点：

• 熟悉 React.lazy + Suspense
• 熟悉 dynamic import
• 理解性能优化的原因

拆解小问题：

1. 为什么需要 code splitting？

   • 大型应用一次加载所有 JS 会导致首屏渲染慢
   • 用户体验差，尤其在移动端

2. 如何在 React 中实现？

   • Route-based splitting：按路由加载页面组件
   • Component-based splitting：按组件加载部分功能
   • 用 React.lazy + Suspense

“Code splitting allows a React app to load only the code that’s needed for the current view, reducing initial bundle size and improving performance. In React, we can implement it using React.lazy for component-level lazy loading, combined with Suspense to show a fallback while the component is loading. For example:

xxxxxxxxxx
10
1
import { Suspense, lazy } from 'react';
2
const Dashboard = lazy(() => import('./Dashboard'));
3
​
4
function App() {
5
return (
6
 <Suspense fallback={<div>Loading...</div>}>
7
   <Dashboard />
8
 </Suspense>
9
);
10
}

For route-level splitting, we can lazy-load page components in combination with React Router, so each route only loads the necessary bundle. Overall, code splitting improves performance, reduces initial load time, and makes large React apps more scalable.”

✅ 面试加分点

• 提到 React.lazy + Suspense
• 提到 route-level vs component-level splitting
• 强调 性能优化

4、what is the best way to add a global store to your react app or project?

关键词拆解：

1. Global store

   • 意思是全局状态管理，让不同组件可以共享数据
   • 常见用途：用户登录信息、主题状态、购物车、全局配置等

2. Best way

   • 考察你对 React 状态管理工具的了解
   • 不仅要能实现，还要考虑性能、易用性、可维护性

3. React app / project

   • 前端应用，需要在组件树中共享状态

核心考点：

• 是否知道 React Context、Redux、Zustand / Jotai 等状态管理方案
• 是否知道什么时候用 Context 就够，什么时候需要 Redux
• 是否考虑性能（避免不必要的重渲染）

拆解小问题：

1. 小型应用或者少量状态怎么办？

   • React Context + useReducer 或 useState 即可

2. 中大型应用怎么办？

   • 使用 Redux Toolkit、Zustand 等高性能全局状态库

3. 其他优化？

   • 只让需要的组件订阅状态，避免全局 Context 导致不必要渲染
   • 使用 immutable updates / selectors

“The best way to add a global store in a React app depends on the size and complexity of the project. For small to medium apps, React Context combined with useReducer or useState is sufficient for managing global state like theme, user info, or UI preferences. For larger applications, I usually prefer Redux Toolkit or Zustand, which provide scalable and performant global state management. These tools offer features like centralized state, selectors for efficient re-rendering, and middleware support for side effects. The key is to choose a solution that balances simplicity, maintainability, and performance, ensuring only the components that need the state are re-rendered when it changes.”

✅ 面试加分点

• 提到 React Context vs Redux Toolkit vs Zustand/Jotai
• 提到 performance optimization（selectors, memoization）
• 提到 middleware / side effects 对大型应用的好处

5、give me an example of a basic react ssr implementation

关键词拆解：

1. SSR (Server-Side Rendering)

   • React 在服务器端生成 HTML，而不是只在浏览器端渲染
   • 优点：更快首屏渲染（FCP）、SEO 更好、用户体验提升

2. Basic implementation

   • 不要求复杂功能，只需要一个能在服务器返回 HTML 的示例

3. React SSR

   • 需要用到 react-dom/server 的 API，比如 renderToString 或 renderToNodeStream

核心考点：

• 能写一个最基础的 SSR React 示例

• 理解 SSR 的流程：

  1. 请求到服务器
  2. 服务器用 React 渲染 HTML
  3. 返回 HTML 给客户端
  4. 客户端 React hydrate 接管

✅ Basic React SSR Example (Without Next.js)

Project Structure

xxxxxxxxxx
3
1
/server.js
2
/App.js
3
/index.html

1、React Component (App.js)

xxxxxxxxxx
6
1
// App.js
2
import React from "react";
3
​
4
export default function App() {
5
  return <h1>Hello from React SSR!</h1>;
6
}

2、Server Entry (server.js)

This uses Node.js + Express + ReactDOMServer to render a React component to HTML on the server.

xxxxxxxxxx
30
1
// server.js
2
import express from "express";
3
import React from "react";
4
import ReactDOMServer from "react-dom/server";
5
import App from "./App.js";
6
​
7
const app = express();
8
​
9
app.get("*", (req, res) => {
10
  const html = ReactDOMServer.renderToString(<App />);
11
​
12
  const fullPage = `
13
    <!DOCTYPE html>
14
    <html>
15
      <head>
16
        <title>React SSR Example</title>
17
      </head>
18
      <body>
19
        <div id="root">${html}</div>
20
        <script src="/client.js"></script>
21
      </body>
22
    </html>
23
  `;
24
​
25
  res.send(fullPage);
26
});
27
​
28
app.listen(3000, () => {
29
  console.log("SSR server running at http://localhost:3000");
30
});

3、Client Hydration (client.js)

To make the server-rendered HTML interactive, you call hydrateRoot on the client:

xxxxxxxxxx
6
1
// client.js
2
import React from "react";
3
import { hydrateRoot } from "react-dom/client";
4
import App from "./App.js";
5
​
6
hydrateRoot(document.getElementById("root"), <App />);

➡️ What this demonstrates to an interviewer

• You understand SSR renders HTML on the server using renderToString.

• You know that the client must hydrate the HTML to make React interactive.

• You understand the difference between server entry and client entry.

• You can explain the benefits:

  • faster first paint
  • SEO
  • better performance on slow devices

Short version you can say in the interview:

“A basic SSR setup uses ReactDOMServer.renderToString() on the server to generate HTML, sends that to the client, and then uses hydrateRoot() to attach React to the existing HTML. This gives faster initial load and better SEO. Next.js automates this, but this is the simplest manual implementation.”

✅ 面试加分点

• 提到 renderToString 或 renderToNodeStream
• 提到 hydrate 用于客户端接管
• 可以提一下 Next.js 或 Razzle 做 SSR 更简单

6、what is react fiber and how does it differ from the old reconciliation algorithm?

关键词拆解：

1. React Fiber

   • React 16 引入的 新渲染引擎
   • 解决旧版本渲染性能问题，支持 增量渲染（incremental rendering） 和 任务优先级调度

2. Old reconciliation algorithm

   • React 15 及之前的 stack reconciler
   • 渲染是 同步的、阻塞的，一次渲染整个组件树

3. How it differs

   • 核心考点：性能优化、增量渲染、可中断更新、优先级调度

拆解小问题：

1. 旧算法的缺点？

   • 所有更新都是同步完成 → 大组件树更新可能阻塞 UI
   • 没有任务优先级 → 动画、交互可能卡顿

2. Fiber 的优势？

   • 支持 可中断渲染
   • 可以按照 优先级调度任务
   • 将渲染拆成小的单元（fiber）
   • 更好支持 异步渲染、动画和交互平滑

简要回答：

“React Fiber is the new reconciliation algorithm and rendering engine introduced in React 16. Its main goal is to make rendering more incremental, interruptible, and responsive. In the old stack reconciler, updates were synchronous and blocking — when a large component tree needed updating, the entire tree would render before the browser could handle user interactions, leading to potential UI jank. Fiber breaks rendering work into small units called fibers, which can be paused, aborted, or assigned different priority levels. This allows React to interrupt long rendering tasks, handle high-priority updates like user input first, and continue low-priority tasks later. In short, Fiber improves performance, responsiveness, and scheduling flexibility compared to the old synchronous algorithm.”

✅ 面试加分点

• 强调 incremental rendering 和 task prioritization
• 可以提一下 support for async rendering
• 使用术语：fiber, unit of work, priority, interruptible rendering

7、how does React determine when to rerender a component?

关键词拆解：

1. Rerender a component

   • React 什么时候会重新执行函数组件的渲染逻辑

2. Determine when

   • 考察对 React 更新机制的理解

3. Function components only

   • 不考虑类组件，只关注函数组件和 Hooks

核心考点：

• 触发 rerender 的条件
• 如何优化避免不必要的 rerender
• 对 state、props、context 的理解

拆解小问题：

1. 哪些操作会触发函数组件 rerender？

   • State 更新 → useState / useReducer
   • Props 改变 → 父组件传入的新值
   • Context 改变 → 使用 useContext 的组件

2. React 内部如何判断？

   • 每次组件 rerender 时，函数会重新执行
   • 如果使用 React.memo，React 会对 props 做 浅比较，跳过不必要渲染

3. 优化方法

   • React.memo 对函数组件做 memoization
   • useCallback / useMemo 对传递的 props 函数或对象做 memoization

函数组件的 rerender 触发条件

1. State 变化

   • useState 或 useReducer 更新 state → 触发 rerender

2. Props 变化

   • 父组件传入的新 props（每次父组件 rerender 都会传递新引用，需要注意引用类型）

3. Context 变化

   • 使用 useContext 的组件，如果 Context 的 value 改变，也会 rerender

4. 优化方法（面试可顺带提）

   • React.memo + useCallback / useMemo → 避免不必要 rerender
   • 注意浅比较规则：对象/数组/函数的引用变化会触发 rerender

简要回答：

1. “In React function components, a component rerenders whenever its state, props, or context changes. Specifically:

   1. State updates via useState or useReducer trigger a rerender, and the component function executes again.
   2. Props changes from the parent component also trigger a rerender — even if the value seems the same, a new object or function reference will cause rerender.
   3. Context changes — if the component consumes a context with useContext, it rerenders when the context value changes. To optimize performance, we can use React.memo to memoize the component and useCallback or useMemo to memoize props or functions passed down, so React can skip unnecessary rerenders. In short, React rerenders function components based on state, props, or context changes, and memoization techniques can help prevent unneeded updates.”

• ✅ 面试加分点

  • 提到 state, props, context
  • 强调 React.memo / useCallback / useMemo 优化性能
  • 解释浅比较原则

8、what are concurrent features in react and how do they help?

关键词拆解：

1. Concurrent features

   • React 18 引入的新特性，用于 并发渲染（concurrent rendering）
   • 允许 React 在渲染大组件树时 可中断、可调度、优先处理重要任务

2. How do they help

   • 考察你对 性能优化、用户体验提升 的理解

核心考点：

• 理解 concurrent mode / concurrent features 的目的
• 了解 优先级调度、可中断渲染、Transition
• 能举例说明使用场景

拆解小问题：

1. 为什么需要 concurrent features？

   • 在大应用里，渲染复杂组件树可能阻塞 UI
   • 用户输入或动画可能卡顿

2. Concurrent features 提供了什么能力？

   • 可中断渲染（interruptible rendering）
   • 任务优先级调度（prioritization）
   • 批量更新（automatic batching）
   • Transitions → 优先保证高优先级交互流畅

3. 具体帮助表现在哪？

   • 保证 用户输入响应及时
   • 首屏渲染顺畅
   • 大数据更新不会阻塞 UI

“Concurrent features in React, introduced in React 18, allow React to render components concurrently rather than blocking the main thread. These features enable interruptible rendering, task prioritization, and smoother user experiences. For example, React can pause rendering a low-priority update, handle user input immediately, and then resume rendering. React also provides Transitions, which help distinguish between urgent updates like typing and non-urgent updates like rendering a large list. Overall, concurrent features help keep the UI responsive, improve performance in large applications, and allow React to handle multiple tasks efficiently without blocking user interactions.”

✅ 面试加分点

• 提到 React 18, concurrent rendering, interruptible rendering
• 提到 task prioritization, transitions, automatic batching
• 强调 提升用户体验和性能

9、explain react's batching behavior and what changed in react 18?

关键词拆解：

1. Batching behavior

   • 批量更新（batching）是指 React 会 把多个 state 更新合并在一次渲染中处理，避免重复渲染，提高性能

2. What changed in React 18

   • 考察你对 React 18 新特性（自动批量更新、并发渲染） 的理解

核心考点：

• React 17 及以前的批量更新：仅在 React 事件处理函数中生效
• React 18 的变化：自动批量更新扩展到所有异步操作（setTimeout、fetch、promise 等）

拆解小问题：

1. 什么是 batching？

   • 如果在同一事件中多次调用 setState，React 会把更新合并，只触发一次渲染

2. React 17 及以前的限制？

   • 批量更新只在 React 事件处理函数内部生效
   • setTimeout、promise.then、原生事件中调用 setState 会触发多次渲染

3. React 18 新特性？

   • Automatic Batching → 扩展到 所有异步上下文
   • 多个 state 更新无论在事件、setTimeout、promise 或 fetch 回调中，都会合并成一次渲染

4. 优势？

   • 减少渲染次数 → 提升性能
   • 更一致的 UI 更新

“Batching in React is the process of merging multiple state updates into a single render to improve performance. In React 17 and earlier, batching only worked inside React event handlers. Updates in setTimeout, promises, or native event handlers would trigger separate renders. In React 18, automatic batching was introduced, which extends batching to all updates, including asynchronous callbacks. Now multiple state updates inside promises, setTimeout, fetch, or any async operations are combined into a single render, reducing unnecessary renders and improving performance. In short, React 18 makes batching more consistent and efficient, helping applications render faster and maintain smoother UI updates.”

✅ 面试加分点

• 强调 React 17 vs React 18 的区别
• 提到 automatic batching 和 异步上下文支持
• 说明 性能提升和减少渲染次数

10、what is the difference between useMemo and useCallback and when you shouldn't use them

关键词拆解：

1. useMemo

   • 用于 缓存函数的返回值，避免重复计算开销大的值
   • 返回 值（result）

2. useCallback

   • 用于 缓存函数本身，避免函数重新创建
   • 返回 函数（function）

3. Difference

   • useMemo → 缓存计算结果
   • useCallback → 缓存函数引用

4. When you shouldn’t use them

   • 不要滥用
   • 小开销函数或轻量计算不需要 memo
   • 过度使用反而增加内存和复杂性

核心考点：

• 了解 缓存值 vs 缓存函数 的区别
• 理解 依赖数组
• 理解滥用的副作用

拆解小问题：

1. useMemo 什么时候用？

   • 当函数返回值计算昂贵，需要避免重复计算
   • 例如：排序大型数组、复杂计算

2. useCallback 什么时候用？

   • 当函数作为 props 传递给子组件，避免子组件不必要 rerender
   • 例如：与 React.memo 配合使用

3. 什么时候不该用？

   • 轻量计算不需要 memo
   • 不要给每个函数都加 useCallback → 增加复杂度和内存开销

“useMemo and useCallback are both React hooks used for memoization, but they serve different purposes.

• useMemo caches the result of a function, helping to avoid expensive recalculations. For example, computing a sorted large array or complex derived value.
• useCallback caches the function itself, preventing it from being recreated on every render. This is useful when passing functions as props to child components wrapped in React.memo to avoid unnecessary rerenders. You shouldn’t use them for every function or value. For cheap calculations or simple functions, the overhead of memoization may outweigh its benefits. Overusing these hooks can increase memory usage and code complexity. In short, useMemo → cache value, useCallback → cache function, and only use them when they provide a performance benefit.”

✅ 面试加分点

• 明确区分 缓存值 vs 缓存函数
• 举例 useMemo → expensive calculation, useCallback → memoized prop function
• 强调 不要滥用

11、How does Suspense work in react and what are some real use cases beyond lazy loading?

关键词拆解

1. Suspense

   • React 的“异步边界（async boundary）”
   • 用来等待某些异步资源准备好，再渲染 UI
   • 与 concurrent features 搭配使用效果更好

2. How does it work?

   • 你需要解释 fallback UI、promise throwing、boundary 的概念
   • Suspense 不是自己加载数据，是等待“某些东西抛出 Promise”

3. Real use cases beyond lazy loading

   • 面试官要看你是否知道 Suspense 的更高阶用途，而不仅仅用于 React.lazy

   • 比如：

     • 数据获取（Data Fetching） → React 18 + Suspense-friendly libraries (React Query / Relay / SWR)
     • Suspense for Images
     • Suspense for Server Components (RSC)
     • Skeleton + streaming SSR
     • Prefetching UI

核心考点

• 你是否理解 Suspense 的机制：组件在等待资源时抛出 Promise → Suspense 捕获 → 显示 fallback
• 是否知道 Suspense 不只是 lazy loading 的语法糖，而是 React 异步渲染的基础
• 是否知道 Suspense 在 modern React（RSC、server-side streaming）中的作用

拆解小问题

1. Suspense 是怎么工作的？（机制）

   • 某个子树中的组件遇到“需要等待的数据/资源”
   • 组件内部（或底层库）抛出一个 Promise
   • Suspense 作为边界捕获 Promise
   • 显示 fallback（如 Loading…）
   • Promise resolved 后继续渲染真正内容

2. 为什么需要 Suspense？（好处）

   • 更平滑的加载状态管理
   • 避免层层传递 loading state
   • 提升用户体验（流畅异步 UI）

3. 除了 lazy loading，还有什么实际场景？

   • Data Fetching（React Query 的 experimental Suspense mode，Relay，RSC）
   • Image loading（图片加载前显示 placeholder）
   • Server Components（等待服务器渲染部分内容）
   • Streaming SSR（React 18’s streaming + Suspense boundaries）
   • Resource prefetching（提前准备 UI）

简要回答：

“Suspense is React’s mechanism for handling asynchronous rendering. It works by letting components throw a Promise when they’re not ready yet, and a surrounding Suspense boundary catches it and shows a fallback UI until the data or resource is ready. This makes async flows much smoother compared to manually managing loading states in every component. Beyond lazy loading, Suspense has several real use cases: • Data fetching with libraries like Relay, React Query, or SWR that support Suspense-friendly APIs. • Image loading, where the UI waits for an image resource before rendering it. • Server Components and streaming SSR in React 18, where Suspense boundaries allow the server to progressively stream UI chunks. • Prefetching UI, letting React prepare parts of the UI in the background before the user navigates to them. Overall, Suspense is a general async boundary pattern that improves both developer experience and user-perceived performance.”

12、what is useImperativeHandle in react and when should it be used?

1️⃣ Keywords

• useImperativeHandle
• forwardRef
• ref
• imperative API
• child component

2️⃣ Core Concepts

• Control what a parent can access via ref
• Hide internal implementation details
• Expose methods instead of DOM nodes
• Used with forwardRef

3️⃣ Sub-questions

• Why not expose the whole DOM or component?
• How does it work with forwardRef?
• When is it a good choice?

4️⃣ Simple English Answer

useImperativeHandle lets a child control what is exposed to a parent through a ref. It is used together with forwardRef. Instead of exposing the DOM node, you expose specific methods. This is useful for actions like focus, scroll, or reset. It should be used rarely.

5️⃣ Solution / Example

Example use case: expose a focus method

xxxxxxxxxx
11
1
const Input = forwardRef((props, ref) => {
2
  const inputRef = useRef(null);
3
​
4
  useImperativeHandle(ref, () => ({
5
    focus() {
6
      inputRef.current.focus();
7
    }
8
  }));
9
​
10
  return <input ref={inputRef} />;
11
});

When to use it:

• Parent needs to trigger an action in the child
• You want a clean, limited API

When not to use it:

• For normal data flow
• When props can solve the problem

Rule: Prefer props. Use useImperativeHandle only when necessary.

13、how do you optimize large lists in react?

1️⃣ Keywords

• large lists
• performance
• re-render
• virtualization
• memoization

2️⃣ Core Concepts

• Rendering many DOM nodes is expensive
• Avoid unnecessary re-renders
• Only render what the user can see
• Keep item components lightweight

3️⃣ Sub-questions

• Why are large lists slow?
• How do you reduce DOM nodes?
• How do you avoid re-rendering items?

4️⃣ Simple English Answer

Large lists are slow because React renders too many DOM elements. The best solution is list virtualization. This means only rendering visible items. Libraries like react-window or react-virtualized help with this. You should also avoid unnecessary re-renders.

5️⃣ Solutions

1. Use virtualization

xxxxxxxxxx
9
1
import { FixedSizeList } from "react-window";
2
​
3
<FixedSizeList
4
  height={400}
5
  itemCount={items.length}
6
  itemSize={35}
7
>
8
  {Row}
9
</FixedSizeList>

2. Memoize list items

xxxxxxxxxx
3
1
const Row = React.memo(({ item }) => {
2
  return <div>{item.name}</div>;
3
});

3. Use stable keys

• Use unique IDs
• Avoid array index as key

4. Avoid heavy logic in render

• Move calculations outside render
• Use useMemo if needed

Rule of thumb: Render less, re-render less, and keep each item simple.

14、how does useRef differ from useState?

1️⃣ Keywords

• useRef
• useState
• re-render
• mutable value
• component lifecycle

2️⃣ Core Concepts

• useState triggers re-renders
• useRef does not trigger re-renders
• useRef keeps the same object between renders
• Different use cases

3️⃣ Sub-questions

• What happens when state changes?
• What happens when ref changes?
• When should each be used?

4️⃣ Simple English Answer

useState is used for data that affects the UI. When state changes, the component re-renders. useRef is used to store mutable values. Changing a ref does not cause a re-render. Refs are often used for DOM access or timers.

5️⃣ Solution / Usage Guide

Use useState when:

• The value should update the UI
• You need React to re-render

Use useRef when:

• You need to store a value without re-rendering
• You want to access a DOM element
• You need to keep values like timers or previous values

xxxxxxxxxx
2
1
const countRef = useRef(0);
2
const [count, setCount] = useState(0);

Rule: If the UI depends on it → useState If not → useRef

15、how does react handle hydration in SSR and what problem can arise?

1️⃣ Keywords

• SSR (Server-Side Rendering)
• hydration
• HTML markup
• client render
• mismatch

2️⃣ Core Concepts

• Server renders HTML first
• React attaches event listeners on the client
• Hydration reuses existing DOM
• HTML must match on server and client

3️⃣ Sub-questions

• What is hydration?
• What happens during hydration?
• What is a hydration mismatch?

4️⃣ Simple English Answer

In SSR, React renders HTML on the server first. On the client, React hydrates the page by attaching event listeners. It reuses the existing HTML instead of creating new DOM nodes. A problem happens when server and client HTML are different. This is called a hydration mismatch.

5️⃣ Problems & Solutions

Common problems:

• Using window or document during server render
• Random values like Math.random() or Date.now()
• Different data on server and client

Solutions:

• Move client-only code to useEffect
• Use consistent data for server and client
• Guard browser APIs

xxxxxxxxxx
3
1
useEffect(() => {
2
  setMounted(true);
3
}, []);

Rule of thumb: Server and client must render the same HTML during the first render.

16、what causes a memory leak in a react component using useEffect

1️⃣ Keywords

• useEffect
• memory leak
• cleanup function
• subscription
• async task
• unmounted component

2️⃣ Core Concepts

• Effects can keep running after a component unmounts
• Missing cleanup is the main reason for memory leaks
• Async callbacks may update state after unmount
• Event listeners and timers must be removed

3️⃣ Sub-questions

• What happens if an effect has no cleanup?
• Why does updating state after unmount cause a leak?
• Which side effects commonly cause leaks?

4️⃣ Simple English Answer

A memory leak happens when a useEffect keeps something alive after the component unmounts. This usually happens when there is no cleanup function. For example, event listeners, timers, or subscriptions are not removed. Async tasks like fetch may also update state after unmount. React warns about this in development mode.

5️⃣ Solution

Common fixes:

• Return a cleanup function in useEffect
• Clear timers with clearTimeout or clearInterval
• Remove event listeners
• Cancel async requests or ignore results after unmount

Example:

xxxxxxxxxx
9
1
useEffect(() => {
2
  const id = setInterval(() => {
3
    console.log("running");
4
  }, 1000);
5
​
6
  return () => {
7
    clearInterval(id);
8
  };
9
}, []);

This prevents the effect from running after the component is unmounted.

17、How can API calls cause memory leaks in react?

1️⃣ Keywords

• API calls
• memory leak
• useEffect
• async / promise
• component unmount
• state update

2️⃣ Core Concepts

• API requests may finish after the component unmounts
• Updating state on an unmounted component causes leaks
• React keeps references because callbacks are still alive
• Cleanup or cancellation is required

3️⃣ Sub-questions

• What happens if an API call finishes late?
• Why is setState after unmount a problem?
• How can we prevent this?

4️⃣ Simple English Answer

API calls can cause memory leaks when they finish after the component unmounts. If the promise resolves and calls setState, React warns about a memory leak. This happens because the async callback is still in memory. The component is gone, but the request is still running. Without cleanup, React cannot release the resources.

5️⃣ Solution

Main solutions:

1. Cancel the request

   • Use AbortController for fetch

2. Ignore the result after unmount

   • Track a mounted flag

Example with AbortController:

xxxxxxxxxx
16
1
useEffect(() => {
2
  const controller = new AbortController();
3
​
4
  fetch("/api/data", { signal: controller.signal })
5
    .then(res => res.json())
6
    .then(data => setData(data))
7
    .catch(err => {
8
      if (err.name !== "AbortError") {
9
        console.error(err);
10
      }
11
    });
12
​
13
  return () => {
14
    controller.abort();
15
  };
16
}, []);

This ensures the API call does not update state after the component is unmounted.

18、How do event listeners create memory leaks in react?

1️⃣ Keywords

• event listeners
• memory leak
• useEffect
• cleanup function
• addEventListener
• removeEventListener

2️⃣ Core Concepts

• Event listeners keep references to functions and components
• If not removed, they stay active after unmount
• This prevents garbage collection
• Multiple renders can add duplicate listeners

3️⃣ Sub-questions

• What happens if listeners are not removed?
• Why do they block garbage collection?
• How do re-renders make it worse?

4️⃣ Simple English Answer

Event listeners can cause memory leaks when they are added but never removed. The listener still exists after the component unmounts. It keeps a reference to the component’s callback. Because of this, the component cannot be garbage collected. Re-renders may also add the same listener multiple times.

5️⃣ Solution

Fix: always clean up listeners

xxxxxxxxxx
11
1
useEffect(() => {
2
  function handleResize() {
3
    console.log(window.innerWidth);
4
  }
5
​
6
  window.addEventListener("resize", handleResize);
7
​
8
  return () => {
9
    window.removeEventListener("resize", handleResize);
10
  };
11
}, []);

Best practices:

• Add listeners in useEffect
• Remove them in the cleanup function
• Keep the handler reference stable (avoid inline functions)

This prevents memory leaks caused by event listeners.

19、Can setInterval or setTimeout cause memory leaks in react?

1️⃣ Keywords

• setInterval
• setTimeout
• memory leak
• useEffect
• cleanup function
• component unmount

2️⃣ Core Concepts

• Timers keep running after the component unmounts
• Callbacks keep references to component state
• setInterval is more dangerous than setTimeout
• Missing cleanup prevents garbage collection

3️⃣ Sub-questions

• What happens if a timer is not cleared?
• Why does the callback cause a leak?
• How do we clean it up correctly?

4️⃣ Simple English Answer

Yes, setInterval and setTimeout can cause memory leaks in React. If they are not cleared, they keep running after the component unmounts. The timer callback keeps references to the component’s state and props. This prevents the component from being garbage collected. setInterval is worse because it runs repeatedly.

5️⃣ Solution

Always clear timers in cleanup

xxxxxxxxxx
9
1
useEffect(() => {
2
  const id = setInterval(() => {
3
    console.log("running");
4
  }, 1000);
5
​
6
  return () => {
7
    clearInterval(id);
8
  };
9
}, []);

Best practices:

• Use clearInterval for setInterval
• Use clearTimeout for setTimeout
• Avoid timers if they are not needed

This prevents memory leaks caused by timers.

20、Can closures or refs cause memory leaks in react？

1️⃣ Keywords

• closure
• useRef
• memory leak
• stale reference
• garbage collection
• long-lived references

2️⃣ Core Concepts

• Closures can keep old state and props in memory
• useRef holds mutable values that survive re-renders
• Long-lived references prevent garbage collection
• Leaks happen when references are never released

3️⃣ Sub-questions

• How do closures keep memory?
• Why can refs live too long?
• When do they become a problem?

4️⃣ Simple English Answer

Yes, closures and refs can cause memory leaks in React. A closure can keep old state or props in memory. If the closure is used in a long-running effect, it never gets released. useRef stores values that stay for the lifetime of the component. If a ref holds large objects or DOM nodes, memory can grow.

5️⃣ Solution

Closures:

• Avoid long-lived callbacks with stale state
• Use proper dependency arrays
• Prefer functional updates when needed

xxxxxxxxxx
7
1
useEffect(() => {
2
  const id = setInterval(() => {
3
    setCount(c => c + 1);
4
  }, 1000);
5
​
6
  return () => clearInterval(id);
7
}, []);

Refs:

• Do not store large data in refs unless needed
• Manually clean refs on unmount

xxxxxxxxxx
5
1
useEffect(() => {
2
  return () => {
3
    myRef.current = null;
4
  };
5
}, []);

Rule of thumb: If something lives longer than the component, it can cause a memory leak.